function $(dom) {
  return document.querySelector(dom)
}
function $all(dom) {
  return document.querySelectorAll(dom)
}
import { map } from './map.js'
window.onload = () => {
  $(".Instruction_btn").onclick = () => {
    $(".Instruction_cont").style.transform = `translate(-50%, -50%) scale(1)`
  }
  $(".menu").onclick = () => {
    $(".Instruction_cont").style.transform = `translate(-50%, -50%) scale(0)`
  }
  $(".start_btn").onclick = () => {
    $(".difficulty_select").style.transform = `translate(-50%, -50%) scale(1)`
  }
  $(".select_menu").onclick = () => {
    $(".difficulty_select").style.transform = `translate(-50%, -50%) scale(0)`
  }
  $(".map_select_btn .menu").onclick = () => {
    $(".map_select").style.transform = `translate(-50%, -50%) scale(0)`
  }
  $(".game_menu").onclick = () => {
    location.reload()
  }
  $(".startRanking").onclick = () => {
    $(".ranking").style.transform = `translate(-50%, -50%) scale(1)`
    let data = JSON.parse(localStorage.getItem("value"))
    if (data) {
      rankingData(data)
    }
  }
  $(".easy_btn").onclick = () => {
    createMapdata(25, 25, 'easy')
  }
  $(".normal_btn").onclick = () => {
    createMapdata(25, 35, 'normal')
  }
  $(".hard_btn").onclick = () => {
    createMapdata(25, 45, 'hard')
  }
  $(".import_btn").onclick = () => {
    $(".file").click()
    $(".file").onchange = function () {
      let files = this.value
      files = window.URL.createObjectURL(this.files[0])
      window.fetch(files).then(res => res.text()).then(data => {
        let dataArr = JSON.parse(data)
        createMaps(dataArr.maps, dataArr.difficulty)
      })
    }
  }
  function rankingData(arr) {
    arr.sort((a, b) => {
      return a.time - b.time ? a.time - b.time : a.steps - b.steps
    })
    let easyArr = [], normalArr = [], hardArr = []
    arr.forEach((item, index) => {
      if (item.difficulty == 'easy') {
        easyArr.push(item)
        $(".box").innerHTML += `
          <ul>
            <li>${index + 1}</li>
            <li>${item.name}</li>
            <li>${item.time}秒</li>
            <li>${item.steps}步</li>
          </ul>
        `
      }
      if (item.difficulty == 'normal') normalArr.push(item)
      if (item.difficulty == 'hard') hardArr.push(item)
    })
    $(".rank_easy").onclick = () => {
      nodeCreate(easyArr)
    }
    $(".rank_normal").onclick = () => {
      nodeCreate(normalArr)
    }
    $(".rank_hard").onclick = () => {
      nodeCreate(hardArr)
    }
  }
  function nodeCreate(arr) {
    $(".box").innerHTML = ''
    arr.forEach((item, index) => {
      $(".box").innerHTML += `
        <ul>
          <li>${arr[index].time == arr[index - 1]?.time && arr[index].step == arr[index - 1]?.step ? index : index + 1}</li>
          <li>${item.name}</li>
          <li>${item.time}秒</li>
          <li>${item.steps}步</li>
        </ul>
      `
    })
  }
  function createMapdata(width, height, difficulty) {
    let arr = []
    for (let i = 0; i < 6; i++) {
      let data = new mapData(width, height)
      arr.push(data.arr)
    }
    createMaps(arr, difficulty)
  }
  function createMaps(arr, difficulty) {
    $(".difficulty_select").style.transform = `translate(-50%, -50%) scale(0)`
    $(".map_select").style.transform = `translate(-50%, -50%) scale(1)`
    $(".map_box").innerHTML = ''
    $(".map_select h2").innerHTML = difficulty
    for (let i = 0; i < arr.length; i++) {
      let node = document.createElement("div")
      node.className = 'map_items'
      for (let j = 0; j < arr[i].length; j++) {
        for (let k = 0; k < arr[i][j].length; k++) {
          let node2 = document.createElement("div")
          node2.className = 'map_item'
          node2.style.top = j * 6 + 'px'
          node2.style.left = k * 6 + 'px'
          node2.style.background = `${arr[i][j][k] ? "#000" : "#fff"}`
          node.appendChild(node2)
        }
      }
      $(".map_box").appendChild(node)
    }
    $(".export").onclick = () => {
      let link = document.createElement("a")
      link.download = `maps_${difficulty}.map`
      link.style.display = "none"
      let obj = { "difficulty": difficulty, "maps": arr }
      let blob = new Blob([JSON.stringify(obj)])
      link.href = URL.createObjectURL(blob)
      link.click()
    }
    $all(".map_items").forEach((item, index) => {
      item.onclick = () => {
        $(".map_select").style.transform = `translate(-50%, -50%) scale(0)`
        $(".userName").style.transform = `translate(-50%, -50%) scale(1)`
        $(".name").value = ''
        $(".goGame").onclick = () => {
          if ($(".name").value !== '') {
            $(".userName").style.transform = `translate(-50%, -50%) scale(0)`
            $(".game").style.transform = `translate(-50%, -50%) scale(1)`
            new map(arr[index], difficulty, $(".name").value)
          }
        }
      }

    })
  }
}

class mapData {
  constructor(width, height, arr = [], checked = []) {
    this.width = width
    this.height = height
    this.arr = arr
    this.checked = checked
    this.getStart()
  }
  getStart() {
    for (let x = 0; x < this.width; x++) {
      this.arr[x] = []
      for (let y = 0; y < this.height; y++) {
        this.arr[x][y] = 1
      }
    }
    this.arr[1][1] = 0
    this.create("1_1")
  }
  create(start) {
    let [x, y] = start.split("_").map(Number)
    let ok = []
    if (this.arr[x + 2] && this.arr[x + 2][y] === 1) ok.push((x + 2) + "_" + y + "_" + (x + 1) + "_" + y)
    if (this.arr[x - 2] && this.arr[x - 2][y] === 1) ok.push((x - 2) + "_" + y + "_" + (x - 1) + "_" + y)
    if (this.arr[x][y + 2] === 1) ok.push(x + "_" + (y + 2) + "_" + x + "_" + (y + 1))
    if (this.arr[x][y - 2] === 1) ok.push(x + "_" + (y - 2) + "_" + x + "_" + (y - 1))

    if (ok.length > 0) {
      let ran = Math.floor(Math.random() * ok.length)
      let [x1, y1, x2, y2] = ok[ran].split("_").map(Number)
      this.arr[x1][y1] = 0
      this.arr[x2][y2] = 0
      this.checked.push(x1 + "_" + y1)
      return this.create(x1 + "_" + y1)
    } else {
      this.checked = this.checked.filter(item => {
        return item !== start
      })
      if (this.checked.length > 0) {
        let ran = Math.floor(Math.random() * this.checked.length)
        return this.create(this.checked[ran])
      } else {
        this.arr[1][0] = 0
        this.arr[this.arr.length - 2][this.arr[0].length - 1] = 0
      }
    }
  }
}